<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Proxy--代理</p>
    <div id="div1"></div>
    <script>
        let obj = {
            age: 18,
            sex: 'nan',
            name: 'Bill'
        }
        let proxy1 = new Proxy(obj, {
            // get方法，在访问对象属性时执行。参数：对象，属性名，proxy实例本身（可选）
            get(target, key, receiver){
                console.log('对象的名字：', target);
                console.log(`获取了${JSON.stringify(target)}的${key}这个属性，他的值是：${target[key]}`);
                console.log(receiver);
                if(key in target) {
                    // 正常显示
                    return target[key]
                }else {
                    // 如果属性不存在，就抛出错误
                    return '属性不存在!'
                }
            },
            // 修改属性时执行。参数：对象，属性名，新的属性值，proxy实例本身（可选）.返回一个tf
            set(target, key, val, receiver) {
                let div1 = document.getElementById('div1');
                div1.innerHTML = '你修改了数据！！！！'
                console.log(key, val);
                console.log(receiver);
                // 根据需求 设置具体值
                if(key === 'age') {
                    if(val > 0 && val <= 100) {
                        target[key] = val;
                    }else {
                        target[key] = 66
                    }
                }
                return true
            },
            // 判断是否存在，返回布尔值
            has(target, key) {
                if(target[key]) {
                    return true
                }else {
                    return false
                }
            },
            // 拦截原始对象的删除操作，由代理对象完成。返回一个布尔值
            deleteProperty(obj, key) {
                if(key === 'age') {
                    delete obj[key]
                    return true
                }else {
                    return false
                }
            }
        })
        // console.log(obj);
        // console.log(proxy1.sex);
        // 这里修改了数据，打开这个代码页面就显示内容
        // proxy1.age = 200;
        console.log(proxy1.age);
        console.log(obj.age);
    </script>
</body>
</html>